<template>
  <div class="pdf__viewer h100 w100" :class="{ fullScreenPdf: isFullScreen }">
    <div class="pdf__viewer h100 w100" ref="pdfViewer">
      <div class="pdf__viewer--btn">
        <el-tag size="mini">共 {{ pageTotalNum }} 页</el-tag>
        <el-tag size="mini" type="danger" v-show="pageTotalNum > maxNum"
          >文件过大，仅预览前{{ maxNum }}页</el-tag
        >
        <el-button
          icon="el-icon-zoom-out"
          type="text"
          v-show="scale > 100"
          @click="scaleX"
        ></el-button>
        <el-button
          @click="fullScreen"
          type="text"
          :title="titleName"
          :icon="!isFullScreen ? 'el-icon-full-screen' : 'el-icon-close'"
        ></el-button>
        <el-button
          icon="el-icon-refresh"
          type="text"
          @click="refresh"
        ></el-button>
        <el-button
          icon="el-icon-zoom-in"
          type="text"
          @click="scaleD"
        ></el-button>
      </div>
      <div class="h100 w100">
        <template v-if="pageTotalNum">
          <pdf
            ref="myPdfComponent"
            class="pdf__content"
            v-for="num in maxNum"
            @error="pdfError($event)"
            :key="num"
            :page="num"
            :src="pdfUrl"
          />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";
export default {
  props: ["src"],
  components: { pdf },
  data() {
    return {
      pdfUrl: "",
      scale: 100, //放大系数
      pageNum: 1,
      pageTotalNum: 0,
      isFullScreen: false,
      pageSize: 10,
    };
  },
  created() {
    this.init();
    //添加滚动到底部事件
    this.$nextTick(() => {
      this.scrollBottom();
    });
  },
  computed: {
    maxNum() {
      let size =
        this.pageTotalNum - this.pageSize > 0
          ? this.pageSize
          : this.pageTotalNum;
      // let num = this.pageTotalNum > 5000 ? 5000 : this.pageTotalNum;
      let num = this.pageTotalNum > 5000 ? 5000 : size;
      return num;
    },
    titleName() {
      let text = this.isFullScreen ? "取消全屏" : "全屏";
      return text;
    },
  },
  mounted() {},
  methods: {
    init() {
      let token = "";
      if (localStorage.getItem("GDH_WATER_TOKEN")) {
        token = localStorage.getItem("GDH_WATER_TOKEN");
      } else {
        token = process.env.VUE_APP_TOKEN;
      }
      let currDs = localStorage.getItem("currDs");
      let headers = {
        'jwt_token':token,
        'DYNAMIC_DATA_SOURCE':currDs
      };
      this.pdfUrl = pdf.createLoadingTask({
        url:this.src,
        httpHeaders:headers
      });
      this.loadPdfHandler();
    },
    //加载成功之后执行
    loadPdfHandler() {
      this.pdfUrl.promise.then((pdf) => {
        this.pageTotalNum = pdf.numPages;
        this.$emit("loadSuccess");
      });
    },
    //放大
    scaleD() {
      this.scale += 20;
      this.$refs.myPdfComponent.map((i) => {
        i.$el.style.width = parseInt(this.scale) + "%";
      });
      //   this.$refs.myPdfComponent.$el.style.width = parseInt(this.scale) + "%";
    },
    pdfError(e) {
      this.$message.error(e.message);
      this.$emit("loadFail");
    },

    //缩小
    scaleX() {
      if (this.scale == 100) {
        return;
      }
      this.scale += -20;
      this.$refs.myPdfComponent.map((i) => {
        i.$el.style.width = parseInt(this.scale) + "%";
      });
      //   this.$refs.myPdfComponent.$el.style.width = parseInt(this.scale) + "%";
    },
    //重置
    refresh() {
      this.scale = 100;

      this.$refs.myPdfComponent.map((i) => {
        i.$el.style.width = parseInt(this.scale) + "%";
      });
      //   this.$refs.myPdfComponent.$el.style.width = parseInt(this.scale) + "%";
    },
    fullScreen() {
      this.isFullScreen = !this.isFullScreen;
    },
    //滚动条滚动到底部
    scrollBottom() {
      const el = this.$refs.pdfViewer;
      const offsetHeight = el.offsetHeight;
      el.onscroll = () => {
        const scrollTop = el.scrollTop;
        const scrollHeight = el.scrollHeight;
        let addHeight = this.isFullScreen ? 250 : 0;
        if (offsetHeight + scrollTop + addHeight - scrollHeight >= -1) {
          // 需要执行的代码
          // console.log("已滚动到底部");
          let newSize = this.pageSize + 10;
          if (this.pageTotalNum - newSize < 0) {
            this.pageSize = this.pageTotalNum;
          } else {
            this.pageSize = newSize;
          }
        }
      };
    },
  },
};
</script>

<style>
.pdf__viewer {
  overflow: auto;
}
.pdf__viewer--btn {
  display: block;
  position: absolute;
  z-index: 2;
  right: 20px;
  top: 60px;
}
.pdf__viewer--btn .el-button {
  font-size: 20px;
}
.pdf__content {
  border-bottom: 1px solid #000;
}
.fullScreenPdf {
  z-index: 2001;
  position: fixed;
  top: 0;
  height: 100%;
  width: 50%;
  overflow-y: auto;
  left: 50%;
  transform: translateX(-50%);
}
</style>